<template>
  <v-card>
    <v-layout>
      <v-navigation-drawer
        permanent
        width="280"
        class="sidebar"
      >
        <!-- 用户信息区域 -->
        <div class="user-section pa-4">
          <div class="d-flex align-center">
            <v-avatar size="40" class="mr-3" color="primary">
              <span class="text-white font-weight-bold">SY</span>
            </v-avatar>
            <div>
              <div class="font-weight-medium">shanghao Yang</div>
              <div class="text-caption text-grey">469473768@qq.com</div>
            </div>
          </div>
        </div>

        <!-- 搜索框 -->
        <div class="px-4 pb-3">
          <v-text-field
            placeholder="搜索"
            prepend-inner-icon="mdi-magnify"
            variant="outlined"
            density="compact"
            hide-details
            class="search-field"
          ></v-text-field>
        </div>

        <!-- 导航菜单 -->
        <v-list class="nav-list" nav>
          <v-list-item 
            v-for="item in navigationItems"
            :key="item.id"
            :id="item.id"
            :name="item.name"
            :prepend-icon="item.icon" 
            :title="item.name" 
            :value="item.id" 
            :to="item.route"
            class="nav-item"
          >
            <template v-slot:append>
              <v-chip 
                v-if="taskStore[item.countKey] > 0" 
                size="small" 
                color="primary"
              >
                {{ taskStore[item.countKey] }}
              </v-chip>
            </template>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

      <v-main style="min-height: 100vh; position: relative;">
        <router-view>
          
        </router-view>
        <div class="pomodoro-fixed">
          <PomodoroClock />
        </div>
      </v-main>
    </v-layout>
  </v-card>
</template>

<script setup>
import { useTaskStore } from '@/stores/taskStore'
import PomodoroClock from '@/components/PomodoroClock.vue'
import { ref } from 'vue'

const taskStore = useTaskStore()

// 导航菜单数据
const navigationItems = ref([
  {
    id: 'today',
    name: '我的一天',
    icon: 'mdi-white-balance-sunny',
    route: '/today',
    countKey: 'todayCount'
  },
  {
    id: 'important',
    name: '重要',
    icon: 'mdi-star-outline',
    route: '/important',
    countKey: 'importantCount'
  },
  {
    id: 'planned',
    name: '计划内',
    icon: 'mdi-calendar-outline',
    route: '/planned',
    countKey: 'plannedCount'
  },
  {
    id: 'assigned',
    name: '已分配给我',
    icon: 'mdi-account-outline',
    route: '/assigned',
    countKey: 'assignedCount'
  },
  {
    id: 'tasks',
    name: '任务',
    icon: 'mdi-home-outline',
    route: '/tasks',
    countKey: 'tasksCount'
  }
])
</script>

<style scoped>
.pomodoro-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2100;
  background: white;
  border-top: 1px solid #e0e0e0;
  padding: 16px;
}

</style>
